<template>
  <div class="recommed">
    <div class="re_td">
      <span class="line"></span>
      <span class="re">优品精选</span>
      <span class="line"></span>
    </div>
    <van-swipe
      class="my-swipe"
      indicator-color="#f50"
      :height="340"
      :width="351"
    >
      <van-swipe-item class="bg1"
      v-for="item,i in good_list" :key="i"
      >
        <ul>
          <li class="re_item"
          v-for="ele in good_list[i]" :key="ele.id"
           @click="goDetail(ele.id)"
          >
            <a>
              <div class="img">
                <img v-lazy="ele.image" alt="" />
              </div>
              <div class="re_store">
                {{ele.store_name}}
              </div>
              <div class="re_price">￥{{ele.price}}</div>
            </a>
          </li>
        </ul>
      </van-swipe-item>
      
    </van-swipe>
  </div>
</template>

<script>
export default {
    props:{
        good_list:{
        type:Array}
    },
    methods:{
        goDetail(id){
           
            this.$router.push('/detail/'+id)
            this.$router.go(0)
            console.log(id)
        }
    }
};
</script>

<style lang="scss" scoped>
.recommed {
  background-color: #fff;
  .re_td {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    .line {
      width: 50px;
      height: 3px;
      background-color: #333;
    }
    .re {
      font-size: 15px;
      margin: 0 12px;
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#f57a37),
        to(#f21b07)
      );
      background-image: linear-gradient(90deg, #f57a37 0, #f21b07);
      background-image: -moz-linear-gradient(to right, #f57a37 0, #f21b07 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .my-swipe {
    width: 351px;
    margin: 0 auto;

    .bg1 {
      ul {
        display: flex;
        flex-wrap: wrap;
        li:nth-child(3n) {
          margin-right: 0;
        }
        li {
          margin: 0 10px 10px 0;
          a {
            display: block;
            width: 109px;
            .img {
              width: 100%;
              height: 109px;
              border-radius: 8px;
              overflow: hidden;
              > img {
                width: 100%;
                height: 100%;
              }
            }

            .re_store {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 13px;
              margin-top: 5px;
              color: #282828;
            }

            .re_price {
              font-size: 13px;
              color: #fc4141;
            }
          }
        }
      }
    }

    /deep/.van-swipe__indicators {
      bottom: 10px;
    }
  }
}

/deep/.van-swipe__indicator{
    opacity: 1;
    width: 15px;
    height: 15px;
    
} 
</style>



